<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/website/common/base.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${webname }-企业认证</title>
<%@ include file="/website/common/common.jsp"%>
<link href="${webctx }/css/manage.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/plugins/plupload2/plupload.full.min.js"></script>
</head>

<body>
<%@ include file="/website/common/top.jsp"%>
<%@ include file="/website/common/head.jsp"%>
<%@ include file="/website/common/menu.jsp"%>

<div class="warp-body">
	<div class="inner clearfix">
    	<div class="left-main">
        	<div class="left-inner">
            	<%@ include file="/website/user/left.jsp"%>
            </div>
        </div>
    	<div class="right-main">
        	<div class="right-inner">
            	<div class="right-title"><span></span>企业认证</div>          
                <div class="ente-head" style="height:133px">
 					<div class="ente-step"><img src="${webctx }/images/step-1.png" /></div>
                </div>
                <div class="right-title"><span></span>企业基本信息 </div>
                <div class="ente-edit-info">
                	<form id="formdata" onsubmit="return false">
                	<input name="savetype" value="" type="hidden">
                	<input name="id" value="${company.id }" type="hidden">
                	<ul>
                		<li class="edit-item" style="z-index:1">
                        	<div class="edit-inner">
                            	<div class="edit-title">企业类型＊：</div>
                                <div class="edit-con J_select_con">
                                	<div class="edit-inp select"><input name="type" type="hidden" value="${company.type }"/><span class="J_select_hd" style="padding-left:3px;">${company.typename }</span><i></i></div>
                                    <div class="select-bd J_select_bd">
                                        <ul>
                                        	<c:forEach var="type" items="${typelist }">
                                            <li val="${type.value }" style="padding-left:3px;">${type.text }</li>
                                            </c:forEach>
                                        </ul> 
                                    </div>
                                    <div class="tips"></div>                                                                       
                              </div>
                            </div>
                        </li>
                        <li class="edit-item">
                        	<div class="edit-inner">
                            	<div class="edit-title">营业执照注册号＊：</div>
                                <div class="edit-con">
                                	<div class="edit-inp"><input type="text" name="idnum" id="" value="${company.idnum }"></div>
                                	<div class="tips"></div>
                                </div>
                            </div>
                        </li>
                        <li class="edit-item">
                        	<div class="edit-inner">
                            	<div class="edit-title">企业名称＊：</div>
                                <div class="edit-con">
                                	<div class="edit-inp"><input type="text" name="name" id="" value="${company.name }"></div>
                                	<div class="tips"></div>
                                </div>
                            </div>
                        </li>
                        <li class="edit-item">
                        	<div class="edit-inner">
                            	<div class="edit-title">联系人＊：</div>
                                <div class="edit-con">
                                	<div class="edit-inp"><input type="text" name="contacts" id="" value="${company.contacts }"></div>
                                	<div class="tips"></div>
                                </div>
                            </div>
                        </li>
                        <li class="edit-item">
                        	<div class="edit-inner">
                            	<div class="edit-title">手机号码＊：</div>
                                <div class="edit-con">
                                	<div class="edit-inp"><input type="text" name="phone" id="" value="${company.phone }"></div>
                                    <div class="tips"></div>
                                </div>
                            </div>
                        </li>
                        <li class="edit-item" style="z-index:1">
                        	<div class="edit-inner">
                            	<div class="edit-title">所属区域＊：</div>
                                <div class="edit-con" id="useraddresscitysel">
                               	  <div class="addre-inp J_select_con">
                                    	<select name="province" class="prov" style="width:99%;border:0px;height:30px;">
							               <option value="">选择省份</option>
							             </select>
                                   </div>
                                  <div class="addre-inp J_select_con">
                                    	<select name="city" class="city" style="width:99%;border:0px;height:30px;">
					               		<option value="">选择城市</option>
					            		</select>
                                    </div>
                                    <div class="addre-inp J_select_con">
                                    	<select name="region" class="dist" style="width:99%;border:0px;height:30px;">
					               		<option value="">选择地区</option>
					            		</select>
                                    </div> 
                                    <div class="tips"></div>                                  
                                </div>
                                
                            </div>
                        </li>
                        <li class="edit-item">
                        	<div class="edit-inner">
                            	<div class="edit-title">详细地址＊：</div>
                                <div class="edit-con">
                                	<div class="edit-inp"><input type="text" name="address" id="" value="${company.address }"></div>
                                	<div class="tips"></div>
                                </div>
                            </div>
                        </li>
                	</ul>
                	</form>
                </div>
                <div class="right-title"><span></span>企业资质信息 </div>
                <div class="ente-papers">
                	<form name="creform" style="margin:0px;" id="cerform">
                	<ul class="edit-papers-inner clearfix">
                		<li class="list" type="1">
                        	<div class="title">企业营业执照（必填项）</div>
                        	<ul class="inp-box datebox">
                        		<li>证件号码：</li>
                        		<li><input type="text" name="idnum" style="width:270px" value="${type1.idnum }" class="easyui-validatebox" data-options="required:true""></li>
                        		<li>证件有效期：</li>
                        		<li><input type="text" name="validity_start" class="easyui-datebox" data-options="required:true" style="width:105px;" value="${type1.validity_start }"><span class="sa">至</span><input type="text" name="validity_end"  class="easyui-datebox" data-options="required:true" style="width:105px;" value="${type1.validity_end }"></li>
                        	</ul>
                        	<div class="pic">
                            	<img src="${ctx }${type1.img}" onerror="this.src='${webctx }/images/290x290_1.png'" width="290" height="290" alt="" id="upimg1">
                            	<c:if test="${not empty type1.img }">
                            	<div class='pl_upimgdiv'><input name="photo" type="hidden" value="${type1.img}"></div>
                            	</c:if>
                            </div>
                            <div class="text">
                                <p class="tl">注意事项：</p>
                                <p>1.企业名称需要与营业执照名称保持一致</p>
								<p>2.三证合一的企业请在证照号码处填写“全国统一社会信用代码”</p>
								<p>3.证照起止日期为必填，若为长期终止时间可不填</p>
                            </div>
                        </li>
                        <li class="list" type="2">
                        	<div class="title">药品经营许可证（非诊所企业必填）</div>
                        	<ul class="inp-box datebox">
                        		<li>证件号码：</li>
                        		<li><input type="text" name="idnum" style="width:270px" value="${type2.idnum }"></li>
                        		<li>证件有效期：</li>
                        		<li><input type="text" name="validity_start" class="easyui-datebox" style="width:105px;" value="${type2.validity_start }"><span class="sa">至</span><input type="text" name="validity_end"  class="easyui-datebox" style="width:105px;" value="${type2.validity_end }"></li>
                        	</ul>
                        	<div class="pic">
                            	<img src="${ctx }${type2.img}" onerror="this.src='${webctx }/images/290x290_1.png'" width="290" height="290" alt="" id="upimg2">
                            	<c:if test="${not empty type2.img }">
                            	<div class='pl_upimgdiv'><input name="photo" type="hidden" value="${type2.img}"></div>
                            	</c:if>
                            </div>
                            <div class="text">
                                <p class="tl">注意事项：</p>
                                <p>1.证号必须清晰可见</p>
								<p>2.仓库地址默认为收货地址</p>
								<p>3.有效期务必清晰可见并在有效期内</p>
								<p><em>非诊所类企业此项为必填</em></p>
                            </div>
                        </li>
                        <li class="list" type="3">
                        	<div class="title">GSP证书（必填项）</div>
                        	<ul class="inp-box datebox">
                        		<li>证件号码：</li>
                        		<li><input type="text" name="idnum" style="width:270px" value="${type3.idnum }" class="easyui-validatebox" data-options="required:true"></li>
                        		<li>证件有效期：</li>
                        		<li><input type="text" name="validity_start" class="easyui-datebox" data-options="required:true" style="width:105px;" value="${type3.validity_start }"><span class="sa">至</span><input type="text" name="validity_end"  class="easyui-datebox" data-options="required:true" style="width:105px;" value="${type3.validity_end }"></li>
                        	</ul>
                        	<div class="pic">
                            	<img src="${ctx }${type3.img}" onerror="this.src='${webctx }/images/290x290_1.png'" width="290" height="290" alt="" id="upimg3">
                            	<c:if test="${not empty type3.img }">
                            	<div class='pl_upimgdiv'><input name="photo" type="hidden" value="${type3.img}"></div>
                            	</c:if>
                            </div>
                            <div class="text">
                                <p class="tl">注意事项：</p>
                                <p>1.认证地址务必保持与收货地址一致</p>
								<p>2.有效期必须清晰可见并且必须在有效期内</p>

                            </div>
                        </li>
                        
                	</ul>
                	</form>
                    <div class="edit-papers-btn">
                    	<button onclick="saveandsubmit()">保存并提交认证</button><button onclick="save()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="saveingbg" style="position:fixed;z-index:998;top:0;left:0;width:100%;height:100%;background:#000000;display:none">
</div>
<div id="saveingmsg" style="position:fixed;z-index:999;top:50%;left:50%;width:330px;height:90px;margin-left:-165px;margin-top:-45px;border:5px solid #BBBBBB;border-radius:3px;background:#fff;text-align:center;display:none">
<p style="margin-top:30px;">正在提交数据 ...</p>
</div>

<%@ include file="/website/common/foot.jsp"%>
<script type="text/javascript" src="${ctx}/plugins/plupload2/plupload.full.min.js"></script>
<script type="text/javascript" src="${ctx}/plugins/oss/upload.js"></script>
<script src="${ctx }/plugins/cityselect/jquery.cityselect.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="${webctx }/css/webeasyui.css">
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</body>
</html>
<script>
var pluploaderObjs=[];
$(function(){
	setLeftCur("certification");
	
	$(document).click(function(){
		$(".J_select_bd").hide();
	})
	
	$('.J_select_hd').click(function(e){
		var that = $(this)
		that.parents('.J_select_con').find('.J_select_bd').show()
		e?e.stopPropagation():event.cancelBubble = true;
		that.parents('.J_select_con').find('.J_select_bd li').click(function(){
			var subText = $(this).text()
			that.text(subText);
			$("[name='type']").val($(this).attr("val"))
		})
	})
	
	$("#useraddresscitysel").citySelect({prov:'${company.province }',city:'${company.city }',dist:'${company.region }',required:false});
	
	for(var i=1;i<=3;i++){
		var plparm={
			runtimes : 'html5,flash,silverlight,html4',
			browse_button :'upimg'+i,
			url :'',
			flash_swf_url : ctx+'/plugins/plupload2/Moxie2.swf',
			silverlight_xap_url : ctx+'/plugins/plupload2/Moxie.xap',
			multi_selection:false,
			filters: {
				max_file_size : '1mb',
				prevent_duplicates :false, //不允许选取重复文件
			  	mime_types : [ //只允许上传图片文件
			    { title : "图片文件", extensions : "jpg,png" }
			  	]
			},init:{
				FilesAdded: function(up, files) {
					for(var i=0;i<up.files.length-1;i++){
						up.removeFile(up.files[0]);
					}
					var upimg=$("#upimg"+getUploaderObj(up).id);
					$(".pl_upimgdiv",upimg.parent()).remove();
					upimg.after("<div class='pl_upimgdiv'><input name='photo' type='hidden'><div class='progressbg'></div><div class='progresstxt'>未上传</div></div>")
					$("#upimg"+getUploaderObj(up).id).attr("src",ctx+"/website/images/viewimg.png");
					previewImageOne(files[0],function(imgsrc){
						var upimg2=$("#upimg"+getUploaderObj(up).id);
						upimg2.attr("src",imgsrc);
					})
				},UploadProgress:function(up,file){
					var upimg=$("#upimg"+getUploaderObj(up).id);
					var f=upimg.next()
					var d=$(".progressbg",f);
					var w=f.width()*parseInt(file.percent)/100;
					d.css("width",w+"px");
					$(".progresstxt",f).html(file.percent+"%");
				},FileUploaded:function(up,file,responseObject){
					var re=jQuery.parseJSON(responseObject.response);
					var upimg=$("#upimg"+getUploaderObj(up).id);
					$("[name='photo']",upimg.next()).val(re.url.replace(re.basepath, ""));
				},UploadComplete:function(up,files){
					touploadimg();
				},Error:function(up, err){
					if(err.code!="-602"){
						if(err.code=="-600")
							alert("图片大小不能超过1mb");
						else
							alert(err.code+"-"+err.message);
					}
					return false;
				}
			}
		};
		$oss.setUpDir("usercheck");
		var uploader=$oss.initUpload(plparm);
		
		pluploaderObjs.push({"id":i,"uploader":uploader})
	}
})

function getUploaderObj(up){
	for(var i=0;i<pluploaderObjs.length;i++){
		if(up.id==pluploaderObjs[i].uploader.id)return pluploaderObjs[i];
	}
}

function previewImageOne(file,callback){
	if(!file || !/image\//.test(file.type)) return;
	if(file.type=='image/gif'){
		var fr2 = new mOxie.FileReader();
		fr2.onload = function(){
			callback(fr2.result);
			fr2.destroy();
			fr2 = null;
		}
		fr2.readAsDataURL(file.getSource());
	}else{
		var preloader = new mOxie.Image();
		preloader.onload = function() {
			//preloader.downsize( 300, 300 );
			var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
			callback && callback(imgsrc);
			preloader.destroy();
			preloader = null;
		};
		preloader.load( file.getSource() );
	}
}

function saveandsubmit(){
	save('submit');
}
var upnum=0;
function touploadimg(){
	if(upnum<pluploaderObjs.length){
		upnum++;
		if(pluploaderObjs[upnum-1].uploader.files.length>0)
			pluploaderObjs[upnum-1].uploader.start();
		else touploadimg();
		
	}else tosubmitdata();
}

function tosubmitdata(){
	var formdata=$("#formdata").serializeArray();
	var photos=[];
	for(var i=0;i<pluploaderObjs.length;i++){
		var obj=$("[type='"+pluploaderObjs[i].id+"']");
		photos.push({"type":""+pluploaderObjs[i].id,"idnum":($("[name='idnum']",obj).length>0?$("[name='idnum']",obj).val():""),"start":($("[name='validity_start']",obj).length>0?$("[name='validity_start']",obj).val():""),"end":($("[name='validity_end']",obj).length>0?$("[name='validity_end']",obj).val():""),"photo":($("[name='photo']",obj).length>0?$("[name='photo']",obj).val():"")});
	}
	formdata.push({"name":"photos","value":JSON.stringify(photos)});
	$w.httpRequest({
		url:apiroot+"/user/savecer",
		data:formdata,
		ok:function(ret){
			window.location.href=ctx+"/user/certification";
		},all:function(){
			$("#saveingbg").hide();
			$("#saveingmsg").hide();
			saveing=false;
		}
	})
}
var saveing=false;
function save(type){
	if(type)$("[name='savetype']").val(type);
	$(".tips").text('');
	if(!checkdata())return;
	if(type=='submit'){
		if($("[name='type']").val()==''){
			showformmsg($("[name='type']"),"请选择企业类型",180);
			return;
		}if($("[name='name']").val()==''){
			showformmsg($("[name='name']"),"请输入企业名称",220);
			return;
		}if($("[name='idnum']").val()==''){
			showformmsg($("[name='idnum']"),"请输入营业执照",250);
			return;
		}if($("[name='contacts']").val()==''){
			showformmsg($("[name='contacts']"),"请输入企业联系人",250);
			return;
		}if($("[name='address']").val()==''){
			showformmsg($("[name='address']"),"请输入企业地址",390);
			return;
		}if($("[name='province']").val()=='' || $("[name='city']").val()==''){
			showformmsg($("[name='region']"),"请选择所属区域",390);
			return;
		}
		if(!checkimg())return;
		if(!$("#cerform").form("validate"))return
	}
	
	$(window).scrollTop(1000);
	if(!saveing){
		saveing=true;
		upnum=0;
		$("#saveingbg").fadeTo("slow",0.5);
		$("#saveingmsg").show();
		touploadimg();//先上传图片
	}
}
function showformmsg(obj,msg,top){
	$(window).scrollTop(top);
	$(".tips",$(obj).parent().parent()).text(msg);
}
function checkdata(){
	var tobj=$("[type='1']");
	if(!IsDate($("[name='validity_start']",tobj).val())){
		alert('企业营业执照证有效开始日期格式不正确');
		return false;
	}
	if(!IsDate($("[name='validity_end']",tobj).val())){
		alert('企业营业执照证有效结束日期格式不正确');
		return false;
	}
	tobj=$("[type='2']");
	if(!IsDate($("[name='validity_start']",tobj).val())){
		alert('药品经营许可证有效开始日期格式不正确');
		return false;
	}
	if(!IsDate($("[name='validity_end']",tobj).val())){
		alert('药品经营许可证有效结束日期格式不正确');
		return false;
	}
	tobj=$("[type='3']");
	if(!IsDate($("[name='validity_start']",tobj).val())){
		alert('GSP证有效开始日期格式不正确');
		return false;
	}
	if(!IsDate($("[name='validity_end']",tobj).val())){
		alert('GSP证有效结束日期格式不正确');
		return false;
	}
	return true;
}
function checkimg(type,name){
	var tobj=$("[type='1']");
	if($("[name='photo']",tobj).length==0 || ($("[name='photo']",tobj).val()=='' && pluploaderObjs[0].uploader.files.length==0)){
		alert('请上传企业营业执照');
		return false;
	}
	if($(".J_select_hd").text().indexOf("诊所")==-1){
		tobj=$("[type='2']");
		if($("[name='idnum']",tobj).val()=='' || $("[name='validity_start']",tobj).val()=='' || $("[name='validity_end']",tobj).val()==''){
			alert('请填写完整药品经营许可证信息');
			return false;
		}
		if($("[name='photo']",tobj).length==0 || ($("[name='photo']",tobj).val()=='' && pluploaderObjs[1].uploader.files.length==0)){
			alert('请上传药品经营（生产）许可证');
			return false;
		}
	}
	tobj=$("[type='3']");
	if($("[name='photo']",tobj).length==0 || ($("[name='photo']",tobj).val()=='' && pluploaderObjs[2].uploader.files.length==0)){
		alert('请上传GSP证书');
		return false;
	}
	return true;
}
</script>